<template>
  <div>
    <el-header class="header">
      <el-row
        type="flex"
        class="row-bg"
        justify="center">
        <el-col :span="8">
          <a
            :href="domain">
            <img
              class="logo"
              src="images/common/logo.png"
              alt="">
          </a>
        </el-col>
        <el-col v-if="def">
          <span />
        </el-col>         
        <el-col 
          v-else-if="user"
          :span="16"
          class="user">
          <!-- 欢迎您， -->
          <span>{{ user }}</span>
          [<nuxt-link to="/changePassword">修改密码</nuxt-link>]  
          [<nuxt-link to="/exit">退出</nuxt-link>]
        </el-col>         
        <el-col 
          v-else
          :span="16"
          class="login">
          <el-button-group>
            <el-button
              size="small"
              round
              @click="register">注册</el-button>
            <el-button
              size="small"
              round
              @click="login">登录</el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </el-header>
    <div class="line" />  
  </div>
</template>

<script>
import config from '@/config/config.js'
  export default {
    data() {
      return {
        id:'',
        def:'1',
        user:'',
        domain: ''
      }
    },
    // mounted() {
    //   this.domain = config.getDomain()
    // },
    async beforeCreate() {
      const {status, data: { user }} = await this.$axios.get('/users/getUser')
      if(status === 200){
        this.def = ''
        if (user !== '') {
          this.user = `${user.substring(0,4)}**`
          this.islogin(user)
        }
        // this.id = id
      }
    },
    async mounted(){
      this.domain = config.getDomain()
    },
    methods: {
      // async returnData() {
      //   const {status, data: { user }} = await this.$axios.get('/users/getUser')
      //   if(status === 200){
      //     this.def = ''
      //     this.user = user.email
      //     return user.email
      //   }
      // },
      register() {
        this.$emit('child-register')
      },
      login() {
        this.$emit('child-login')
      },
      islogin(x) {
        // this.$emit('child-islogin')
        this.$emit('child-islogin', x)
      }
    }
  }
</script>

<style lang="scss">
.header {
  line-height: 60px;
  margin: 0 15%;
}
.logo {
  height: 60px;
  line-height: 60px;
}
.line {
  background-color: #e6e6e6;
  height: 1px;
}
.login {
  text-align: right;
}
.user {
  text-align: right;
  font-size: 12px;
  span {

  }
}
</style>